<template>
  <div id="login">
    <div class="center">
      <div class="logo">
        <img src="@/assets/img/login.png" alt="" />
      </div>
      <div class="centent">
        <el-form
          ref="loginRef"
          :model="loginForm"
          :rules="rules"
          status-icon
          label-position="top"
        >
          <el-form-item label="用户名" prop="name">
            <el-input v-model.trim="loginForm.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input
              v-model.trim="loginForm.pass"
              clearable
              type="password"
            ></el-input>
          </el-form-item>
        </el-form>
        <button @click="submit">登录</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, unref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { loginForm, rules } from '@/hooks/adminLogin'
import { ElForm, ElMessage } from 'element-plus'
import { admintorLogin } from '@/server/serve/api_admintor'
import { journalStore, userIPAndPosition } from '@/server/serve/api_journal'
import cache, { CacheType } from '@/utils/cache'

// 登录按钮DOM
const loginRef = ref<InstanceType<typeof ElForm>>()

const store = useStore()
const router = useRouter()

// 登录
const submit = async (): Promise<any> => {
  // 当前登录设备
  let equipment = 0
  // 获取登录设备
  if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    // iPhone 移动 => 2
    equipment = 2
  } else if (/(Android)/i.test(navigator.userAgent)) {
    // Android 移动 => 1
    equipment = 1
  } else {
    // PC端 => 0
    equipment = 0
  }
  // 获取登录IP地址和位置信息
  const { data: userIP } = await userIPAndPosition()
  // IP地址
  const loginIP = userIP.split('"ip":"')[1].split('"')[0]
  // 位置信息
  const loginPosition = userIP.split('"addr":"')[1].split('"')[0].split(' ')[0]
  const loginform = unref(loginRef)
  if (!loginForm) return
  try {
    await loginform?.validate()
    const { data: userLogin } = await admintorLogin(
      loginForm.name,
      loginForm.pass
    )
    if (userLogin.code)
      return ElMessage({
        message: userLogin.mes,
        type: 'warning'
      })
    // 将token存入本地
    cache.setItem('token', userLogin.data?.token, CacheType.session)
    // 存入vuex
    store.commit('setUserInfo', userLogin.data?.vuexData)
    // 跳转首页
    router.push('/admin')
    // 登录成功
    ElMessage({
      message: '登录成功',
      type: 'success'
    })

    // 存入登录日志
    await journalStore({
      type: 0,
      equipment,
      author: userLogin.data?.vuexData._id,
      loginIP,
      loginPosition
    })
    // 清空表单
    loginform?.resetFields()
  } catch (error) {
    ElMessage({
      message: '请输入合适的内容',
      type: 'warning'
    })
  }
}
</script>

<style scoped lang="less">
#login {
  width: 100vw;
  height: 100vh;
  background: url('http://demo.mxyhn.xyz:8020/cssthemes6/lcq2021012605/images/login_bgx.gif');
  box-sizing: border-box;
  .center {
    width: 400px;
    height: 350px;
    // background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-size: cover;
    .logo {
      width: 380px;
      height: 42px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .centent {
      width: 380px;
      height: 260px;
      box-shadow: -1px 3px 10px rgb(190, 179, 179);
      border-radius: 3px;
      background-color: #f7f7f7;
      padding: 30px;
      box-sizing: border-box;
      button {
        display: block;
        border: none;
        width: 100%;
        height: 32px;
        margin-top: 20px;
        color: #fff;
        font-weight: 600;
        background: linear-gradient(to top, #5388e3, #9cd4f6);
        cursor: pointer;
      }
    }
  }
}
</style>
